<template>
    <el-dialog :title="dialogFrom.dialogTitle" :model-value="dialogFrom.dialogVisible"
        @input:model-value="updateDialogVisible" align-center width="60%" :before-close="onCancel">
        <el-form ref="unifiedFormRef" :model="dataInfo" :rules="rules" label-width="100px" class="demo-ruleForm">
            <el-form-item label="配置名称" prop="configName">
                <el-input v-model="dataInfo.configName" placeholder="请填写配置名称" clearable></el-input>
            </el-form-item>
            <el-form-item label="配置键名" prop="configKey">
                <el-input v-model="dataInfo.configKey" placeholder="请填写配置键名" clearable></el-input>
            </el-form-item>
            <el-form-item label="配置键值" prop="configValue">
                <el-input v-model="dataInfo.configValue" placeholder="请填写配置键值" clearable></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input v-model="dataInfo.remark" placeholder="请填写备注" clearable type="textarea"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="onSubmit(unifiedFormRef)" :loading="loading">提交</el-button>
                <el-button @click="onCancel">取消</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
// -------------------------------------------------导入相关引用-------------------------------------------------

import { ref, watch } from 'vue';
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import type { DataInfo } from '@/api/system/SysConfig'
import { getInfo, saveInfo, editInfo } from '@/api/system/SysConfig'

// -------------------------------------------------相关参数定义-------------------------------------------------
const loading = ref(false);

const props = withDefaults(defineProps<{
    dialogFrom: DialogFrom
}>(), {
    dialogFrom: () => ({
        dialogTitle: '',
        dialogVisible: false,
        infoId: null,
    })
});

const unifiedFormRef = ref<FormInstance | undefined>(undefined);

const rules: FormRules = {
    configName: [
        { required: true, message: '配置名称不能为空', trigger: 'blur' }
    ],
    configKey: [
        { required: true, message: '配置键名不能为空', trigger: 'blur' }
    ],
    configValue: [
        { required: true, message: '配置键值不能为空', trigger: 'blur' }
    ],
}

const initData = {
    id: null,
    configName: '',
    configKey: '',
    configValue: '',
    remark: '',
}

const dataInfo = ref<DataInfo>({ ...initData })

// ---------------------------------------------------事件定义--------------------------------------------------

const emit = defineEmits(['update:dialogFrom', 'onParentSearch']);

// -------------------------------------------------操作方法定义-------------------------------------------------

/**
 * 监听dialogFrom参数
 */
watch(() => props.dialogFrom.dialogVisible, (newValue, oldValue) => {
    if (newValue) {
        getInfoApi();
    }
})

/**
 * 获取表单信息
 */
const getInfoApi = async () => {
    const infoId = props.dialogFrom.infoId;
    if (infoId) {
        await getInfo(infoId).then((res) => {
            if (res.data.code === 200) {
                dataInfo.value = res.data.data;
            }
        })
    }
}

/**
 * 提交表单
 */
const onSubmit = async (ref: FormInstance | undefined) => {
    if (!ref) return
    loading.value = true;
    await ref.validate((valid, fields) => {
        if (valid) {
            if (props.dialogFrom.infoId) {
                editInfo(dataInfo.value).then((res) => {
                    loading.value = false
                    if (res.data.code === 200) {
                        ElMessage.success({
                            message: '修改成功',
                            type: 'success'
                        })
                        onCancel();
                    }
                })
            } else {
                saveInfo(dataInfo.value).then((res) => {
                    loading.value = false
                    if (res.data.code === 200) {
                        ElMessage.success({
                            message: '添加成功',
                            type: 'success'
                        })
                        onCancel();
                    }
                })
            }
        }else { 
            loading.value = false
        }
    })
}

/**
 * 关闭弹窗
 */
const onCancel = () => {
    resetFrom();
    emit('update:dialogFrom', {
        dialogVisible: false,
        dialogTitle: '',
        infoId: null
    });
    emit('onParentSearch');
}

/**
 * 重置表单
 */
const resetFrom = () => {
    dataInfo.value = { ...initData }
}

/**
 * 更新弹窗显示状态
 * @param dialogFromParams
 * @returns void
 */
const updateDialogVisible = (dialogFromParams: DialogFrom) => {
    emit('update:dialogFrom', dialogFromParams);
}

// -------------------------------------------------实体定义区-------------------------------------------------

/**
 * 弹窗信息
 */
export interface DialogFrom {
    dialogTitle: string;
    dialogVisible: boolean;
    infoId: number | null;
}
</script>

<style lang="scss" scoped></style>